/* 
图表概览 
1 显示班级概况
2 薪资-折线图
3 籍贯-饼图
4 成绩-柱状图 

 */

const toggleBatchBtn = document.querySelector('#toggleBatchBtn'); // 显示成绩的小菜单
const batchUl = document.querySelector('#batch'); // 成绩的菜单

// 班级概况
function getStudentOverview() {
  axios.get('/student/overview').then((result) => {
    // console.log(result);
    if (result.data.code === 0) {
      // 获取里面的数据
      const { avgAge, avgSalary, proportion, total } = result.data.data;
      document.querySelector('.avgAge').innerText = avgAge;
      document.querySelector('.avgSalary').innerText = avgSalary;
      document.querySelector('.proportion').innerText = proportion;
      document.querySelector('.total').innerText = total;
    }
  });
}

// 班级概况
getStudentOverview();

// 获取全部学员信息
function getStudentList() {
  axios.get('/student/list').then((result) => {
    const list = result.data.data;

    // 接收数组 渲染折线图
    salaryLine(list);
    // 籍贯饼图
    homeTown(list);
  });
}

// 薪资折线图
function salaryLine(list) {
  // 拆分 期望薪资数组
  const salarys = list.map((v) => v.salary);
  // 拆分 实际薪资数组
  const truesalarys = list.map((v) => v.truesalary);

  // 拆分 名单数组
  const names = list.map((v) => v.name);

  // 变成 图表显示出来

  // 1 获取有宽度和高度的div 元素 传入 echarts 实例化
  const myChart = echarts.init(document.querySelector('.line'));
  // 2 添加一些 配置
  const option = {
    // 设置线条颜色
    color: ['#ee6666', '#5470c6'],
    title: {
      text: '薪资 Salary',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {},
    // 工具箱
    toolbox: {
      show: false,
      feature: {
        dataZoom: {
          yAxisIndex: 'none',
        },
        dataView: { readOnly: false },
        magicType: { type: ['line', 'bar'] },
        restore: {},
        saveAsImage: {},
      },
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: names, // 同学名单
    },
    yAxis: {
      type: 'value',
    },
    // 滑块
    dataZoom: [
      {
        type: 'inside',
        start: 0,
        end: 10,
      },
      {
        start: 0,
        end: 10, // 总宽度100  10 十分之一 ，  这个设置要上 上面的设置 保持一致
      },
    ],
    series: [
      {
        name: '期望薪资',
        type: 'line',
        smooth: true, // 线条平滑
        symbol: 'circle', // 实心
        data: salarys, // 真实的数据
      },
      {
        name: '实际薪资',
        type: 'line',
        symbol: 'circle', // 实心

        smooth: true, // 线条平滑
        data: truesalarys, // 真实数据
      },
    ],
  };

  // 3 echart实例开始使用配置
  myChart.setOption(option);
}

// 籍贯饼图
function homeTown(list) {
  /* 
  1 定义一个空数组 表示 处理后的数据    
    [
    {value:5,name:"广东省"},
    {value:15,name:"贵州省"},
    ]

  2 对 list做遍历
    1 判断一下 当前被遍历的元素 是否存在于 新数组中
    2 如果不存在 新数组push一个新的对象  {value:1,name:"广东"}
    3 如果存在  找到数组中的元素，给它value值 +1 
   */

  const newList = [];
  list.forEach((v) => {
    // v 就是 list中元素    vv.name
    // vv 自己构造的 新数组中的元素
    const index = newList.findIndex((vv) => vv.name === v.province);
    // 如果找到 index不等于-1
    if (index === -1) {
      newList.push({ value: 1, name: v.province });
    } else {
      newList[index].value++;
    }
  });

  const myChart = echarts.init(document.querySelector('.pie'));
  const option = {
    title: {
      text: '籍贯 HomeTown',
    },
    series: [
      {
        name: '籍贯 HomeTown',
        type: 'pie',
        radius: [50, 150],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 8,
        },
        data: newList, // 处理后的数组
      },
    ],
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}

// 安装次数来 获取成绩 数据
// /score/batch?batch=2
function getScoreBatch(batch) {
  axios.get('/score/batch', { params: { batch } }).then((result) => {
    // console.log(result);
    if (result.data.code === 0) {
      // avgScore : 平均分
      // group ： 组名
      // gt60 ： 60-80 之间的人数
      // gt80 : 80  以上的人数
      // lt60 ： 小于  60分 人数
      const { avgScore, group, gt60, gt80, lt60 } = result.data.data;

      const myChart = echarts.init(document.querySelector('.barChart'));

      // 指定图表的配置项和数据

      const option = {
        // 设置图表拉伸
        grid: {
          top: 30, // 设置图表的顶部和容器的距离 -  设置拉伸
          bottom: 20, // 设置图表的底部和容器的距离 -  设置拉伸
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999',
            },
          },
        },
        legend: {
          data: [
            '平均分',
            '低于60分人数',
            '60分-80分之间人数',
            '高于80分的人数',
          ],
        },
        xAxis: [
          {
            type: 'category',
            data: group, // 组号
            axisPointer: {
              type: 'shadow',
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            max: 100,
            interval: 10, // 间隔
            axisLabel: {
              formatter: '{value}分',
            },
          },
          {
            type: 'value',
            min: 0,
            max: 10,
            interval: 1,
            axisLabel: {
              formatter: '{value}人',
            },
          },
        ],
        series: [
          {
            name: '平均分',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml';
              },
            },
            data: avgScore, // 平均分
          },
          {
            name: '低于60分人数',
            type: 'bar',
            yAxisIndex: 1, // 参考右侧的y轴
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml';
              },
            },
            data: lt60,
          },
          {
            name: '60分-80分之间人数',
            type: 'bar',
            yAxisIndex: 1, // 参考右侧的y轴
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml';
              },
            },
            data: gt60,
          },
          {
            name: '高于80分的人数',
            type: 'bar',
            yAxisIndex: 1, // 参考右侧的y轴
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml';
              },
            },
            data: gt80,
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  });
}
getStudentList();

getScoreBatch(1);

// 添加点击事件 控制 成绩菜单 切换显示
toggleBatchBtn.addEventListener('click', function (e) {
  batchUl.classList.toggle('show');
});

//  点击 第几次成绩
batch.addEventListener('click', function (e) {
  if (e.target.nodeName === 'A') {
    const index = e.target.dataset.index;
    // 根据第几次 来获取对应成绩
    getScoreBatch(index);
  }
});